<template>
	<view>
		<view class="search-box u-f-jsb">
			<input type="text" value="" placeholder="输入手机号检索" confirm-type="search"/>
			<image class="icon-search" src="/static/images/icon-search.png" mode="aspectFill"></image>
		</view>
		<view class="list">
			<block v-for="(item, index) in 6" :key="index">
				<view class="item" data-url="../userDetail/userDetail" @tap="$jumpPage">
					<view>易烊千玺</view>
					<view>18356522546</view>
				</view><strong></strong>
			</block>
		</view>
		<view class="no-data u-f-ajc">
			<view>无搜索结果</view>
			<view :data-url="`../addNewUser/addNewUser?phone=${thePhone}`" @tap="$jumpPage">添加新用户</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				thePhone:'1575562191' // 添加新用户的电话号码
			};
		},
		onLoad() {
			this.search();
		},
		methods: {
			search() {
				this.$u.api._searchUserByPhone().then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss">
.search-box {
	margin:30rpx 50rpx;
	background-color: rgba(245, 245, 245, 1);
	border-radius: 10rpx;
	padding: 0 30rpx;
	height: 78rpx;
	
	.icon-search {
		width: 40rpx;
		height: 40rpx;
	}
}

.list {
	margin:30rpx 50rpx ;
	.item {
		border-top: 1rpx solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #343434;
		font-size: 28rpx;
		height: 100rpx;
		>view:last-child {
			color: #9A9A9A;
		}
	}
}
.no-data {
	text-align: center;	
	font-size: 30rpx;
	
	>view:nth-child(2) {
		color: rgba(255, 206, 0, 1);
		margin-left: 20rpx;
		padding: 20rpx 0;
	}
}
</style>
